<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/global.jsp"%>

<script type="text/javascript"
	src="${baseUrl}/resources/qiniu/plupload.full.min.js"></script>
<script type="text/javascript"
	src="${baseUrl}/resources/qiniu/qiniu.min.js"></script>

<div id="banner-info-win" class="easyui-window" title="添加广告栏"
	style="width: 1000px; height: 500px"
	data-options="iconCls:'icon-cog',modal:true,openAnimation:'fade',closeAnimation:'slide',cache:false,collapsible:false,minimizable:false,maximizable:false">

	<form id="banner-info-win-form" method="post"
		style="width: 400px; height: 400px; margin: 10px auto;">
		<input id="bannerForAdd-form-title" type="text" name="title" /> 
		<input
			id="bannerForAdd-form-sort" type="text" name="sort" /> 
		<input
			id="bannerForAdd-form-status" name="status" /> 
		<input
			id="bannerForAdd-form-platform" name="platform" />
		<input
			id="bannerForAdd-form-startTime" type="text" name="startTimeStr" />
		<input id="bannerForAdd-form-endTime" type="text" name="endTimeStr" />
		<input id="bannerForAdd-form-url" type="text" name="url" />

		<div id="bannerForAdd-form-coverFile-container">
			<a id="bannerForAdd-form-coverFile-a" href="javascript:;"> <input
				id="bannerForAdd-form-coverFile" type="text" name="coverFile" />
			</a>
		</div>

		<input id="bannerForAdd-form-coverUrl" type="text" name="coverUrl"
			style="display: none;" /> <input type="button" value="添 加"
			onclick="banner_add()" style="float: right; margin-top: 10px;" />
		<div style="clear: both;"></div>
	</form>

</div>

<script type="text/javascript">
	function banner_add() {
		var title = $('#bannerForAdd-form-title').textbox('getValue');
		if (!title) {
			$.messager.alert('提示', '请填写标题', 'warning');
			return;
		} else if (title.lenght > 50) {
			$.messager.alert('提示', '标题长度不能大于50个字', 'warning');
			return;
		}

		if (!bannerForAddCoverUploader || !bannerForAddCoverUploader.files
				|| !bannerForAddCoverUploader.files.length) {
			$.messager.alert('提示', '请选择封面', 'warning');
			return;
		}

		bannerForAddCoverUploader.start();

	}

	function getToken(type, extral, suffix) {
		var data = undefined;
		$.ajax({
			async : false,
			url : baseUrl + '/upload/token/' + type + '?suffix=' + suffix
					+ '&extral=' + extral,
			success : function(dataR) {
				data = dataR;
			}
		});
		return data;
	}
</script>

<!--封面上传 -->
<script type="text/javascript">
	var bannerForAddCoverUploader = undefined;

	$(function() {
		// 引入Plupload 、qiniu.js后
		bannerForAddCoverUploader = new QiniuJsSDK()
				.uploader({
					runtimes : 'html5,flash,html4', //上传模式,依次退化
					browse_button : 'bannerForAdd-form-coverFile-a', //上传选择的点选按钮，**必需**  需要修改 自己指定
					// 		uptoken_url : '/token', //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
					uptoken : '${imgBucketToken}', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成    需要修改
					// unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
					// save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
					domain : '${imgBucketDomain}', //bucket 域名，下载资源时用到，**必需**  需要修改
					get_new_uptoken : false, //设置上传文件的时候是否每次都重新获取新的token  
					container : 'bannerForAdd-form-coverFile-container', //上传区域DOM ID，默认是browser_button的父元素，    需要修改
					max_file_size : '10mb', //最大文件体积限制    需要修改
					filters : {
						mime_types : [ {
							title : "Image files",
							extensions : "jpg,jpeg,gif,png"
						} ]
					},
					flash_swf_url : '${baseUrl}/resources/qiniu/Moxie.swf', //引入flash,相对路径    需要修改
					max_retries : 3, //上传失败最大重试次数
					dragdrop : true, //开启可拖曳上传
					drop_element : 'bannerForAdd-form-coverFile-container', //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
					chunk_size : '4mb', //分块上传时，每片的体积
					auto_start : false, //选择文件后自动上传，若关闭需要自己绑定事件触发上传    需要修改 改成手动触发
					init : {
						'FilesAdded' : function(up, files) {
							plupload.each(files, function(file) {
								// 文件添加进队列后,处理相关的事情
								$('#bannerForAdd-form-coverFile').textbox({
									value : files[0].name
								});
							});
						},
						'BeforeUpload' : function(up, file) {
							// 每个文件上传前,处理相关的事情
						},
						'UploadProgress' : function(up, file) {
							// 每个文件上传时,处理相关的事情
							var done = up.total.loaded, total = up.total.size;
							$.messager.progress({
								msg : "图片文件上传进度",
								text : (Math.floor(done / total * 1000) / 10)
										+ '%',
								interval : 0
							});
							$.messager.progress('bar').progressbar('setValue',
									(Math.floor(done / total * 1000) / 10));
						},
						'FileUploaded' : function(up, file, info) {
							$.messager.progress('close');
							//$.messager.alert('提示', '封面上传成功', 'info');
							$('#bannerForAdd-form-coverUrl').val(
									eval('(' + info + ')').key);

							$('#banner-info-win-form').submit();

							// 每个文件上传成功后,处理相关的事情
							// 其中 info 是文件上传成功后，服务端返回的json，形式如
							// {
							//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
							//    "key": "gogopher.jpg"
							//  }
							// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

							// var domain = up.getOption('domain');
							// var res = parseJSON(info);
							// var sourceLink = domain + res.key; 获取上传成功后的文件的Url
						},
						'Error' : function(up, err, errTip) {
							$.messager.alert('提示', '出错', 'error');
							//上传出错时,处理相关的事情
						},
						'UploadComplete' : function() {
							//队列文件处理完毕后,处理相关的事情
						},
						'Key' : function(up, file) {
							// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
							// 该配置必须要在 unique_names: false , save_key: false 时才生效
							return getToken('jilefojing-img', 'banner',
									file.name.substring(file.name
											.lastIndexOf('.') + 1)).data.key;
						}
					}
				});
	});

	// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取

	// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
</script>


<script type="text/javascript">
	$(function() {

		$('#bannerForAdd-form-coverFile').textbox({
			buttonAlign : 'right',
			buttonText : '上传封面',
			width : 400,
			prompt : '选择封面图片',
			accept : 'image/bmp,image/png,image/gif,image.jpg,image/jpeg'
		});

		$('#bannerForAdd-form-title').textbox({
			buttonAlign : 'left',
			buttonText : '标&nbsp;&nbsp;题',
			width : 400,
			height : 40,
			multiline : true
		});

		$('#bannerForAdd-form-url').textbox({
			buttonAlign : 'left',
			buttonText : '外&nbsp;&nbsp;链',
			width : 400,
		});

		$('#bannerForAdd-form-sort').numberbox({
			min : 0,
			buttonAlign : 'left',
			buttonText : '排&nbsp;&nbsp;序',
			precision : 2,
			width : 400,
			value : 0,
			required : true
		});

		$('#bannerForAdd-form-status').combobox({
			data : [ {
				"statusCode" : 0,
				"statusMsg" : "待发布"
			}, {
				"statusCode" : 1,
				"statusMsg" : "已发布",
				"selected" : true
			}, {
				"statusCode" : 2,
				"statusMsg" : "已下线"
			} ],
			valueField : 'statusCode',
			textField : 'statusMsg',
			width : 400,
			buttonAlign : 'left',
			buttonText : '状&nbsp;&nbsp;态',
			required : true
		});

		$('#bannerForAdd-form-platform').combobox({
			data : [ {
				"platformCode" : 1,
				"platformMsg" : "所有平台",
				"selected" : true
			}, {
				"platformCode" : 2,
				"platformMsg" : "web和wap"
			}, {
				"platformCode" : 3,
				"platformMsg" : "android和ios"
			}, {
				"platformCode" : 4,
				"platformMsg" : "web"
			}, {
				"platformCode" : 5,
				"platformMsg" : "wap"
			}, {
				"platformCode" : 6,
				"platformMsg" : "android"
			}, {
				"platformCode" : 7,
				"platformMsg" : "ios"
			} ],
			valueField : 'platformCode',
			textField : 'platformMsg',
			width : 400,
			buttonAlign : 'left',
			buttonText : '平&nbsp;&nbsp;台',
			required : true
		});

		var nowDate = new Date();
		$('#bannerForAdd-form-startTime').datetimebox(
				{
					value : nowDate.getFullYear() + "-"
							+ (nowDate.getMonth() + 1) + "-"
							+ nowDate.getDate() + " " + nowDate.getHours()
							+ ":" + nowDate.getMinutes(),
					required : true,
					showSeconds : false,
					width : 400,
					buttonAlign : 'left',
					buttonText : '开始时间'
				});

		$('#bannerForAdd-form-endTime').datetimebox({
			value : '2999-12-31 23:59',
			required : true,
			showSeconds : false,
			width : 400,
			buttonAlign : 'left',
			buttonText : '结束时间'
		});

		$('#banner-info-win-form').form(
				{
					url : baseUrl + '/banner/add',
					iframe : false,
					onSubmit : function(param) {

					},
					onProgress : function(percent) {
						$.messager.progress({
							msg : "正在保存中...",
							text : percent + '%',
							interval : 0
						});
						$.messager.progress('bar').progressbar('setValue',
								(percent / 100));
					},
					success : function(data) {
						$.messager.progress('close');

						data = eval('(' + data + ')');
						if (data.responseCode == '000') {
							$.messager.alert('提示', '添加成功', 'info');
						} else {
							$.messager.alert('提示', data.responseMessage,
									'error');
						}
					}
				});

		var banner_info_win = $('#banner-info-win').window({
			onBeforeClose : function() {

			},
			onClose : function() {
				banner_info_win.panel('destroy');
			}
		});

	});
</script>
